<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1981897_vuivu7ezc59.css">

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/layui/layui.all.js"></script>
    <!--导入jquery.color库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.1.2/jquery.color.js"></script>
    <style>
        body {
            background-color: #F9F9F9;
            color: #666666;
            font-size: 14px;
            text-decoration: none;
        }

        a {
            text-decoration: none;
            color: #9D9D9D;
        }

        .mi-wrapper {
            width: 100%;
            min-height: 100%;
            height: auto;
            /*display: -webkit-box;*/
        }

        /*小米注册 mi-register 开始*/
        .mi-register {
            display: block;

            width: 786px;
            min-height: 100px;
            /*height: 100px;*/
            background-color: #FFFFFF;
            margin: 0 auto;
            text-align: center;
            vertical-align: center;
        }

        .mi-register .mi-wrap {

        }

        /*小米logo mi-logo-external*/
        .mi-register .mi-wrap .mi-logo-external {
            padding: 0 0 40px 0;
            display: block;

        }

        .mi-register .mi-wrap .mi-logo-external img {
            width: 49px;
            height: 49px;
        }

        /*“注册小米账号”标题 mi-reg-title*/
        .mi-register .mi-wrap .mi-reg-title {
            color: #333333;
            font-size: 30px;
            line-height: 1.5;
        }

        /*小米注册容器 mi-reg-container*/
        /*注册输入框 mi-regbox*/
        .mi-register .mi-wrap .mi-reg-container .mi-regbox {
            margin: 0 227px;
            padding: 30px 0;
            width: 332px;
            display: block;
            /*background-color: #FFFFFF;*/
            /*border: 1px solid black;*/
        }


        .mi-register .mi-wrap .mi-reg-container .mi-regbox .mi-phone-step {

        }

        .mi-register .mi-wrap .mi-reg-container .mi-regbox .mi-phone-step > p {
            text-align: left;
            font-size: 14px;
            line-height: 30px;
        }

        /*“立即注册”按钮样式*/
        .mi-register .mi-wrap .mi-reg-container .mi-regbox .mi-phone-step .mi-reg-submit {
            width: 332px;
            height: 42px;
            line-height: 42px;
            font-size: 20px;
            margin-top: 15px;
            border: 1px solid rgba(186, 186, 186, 0.3);
            outline: medium; /*隐藏注册按钮的轮廓*/
            background-color: #FF6700;
            color: #ffffff;
            cursor: pointer;
            transition: all 0.1s;
        }

        /*鼠标指向“立即注册”时的操作*/
        .mi-register .mi-wrap .mi-reg-container .mi-regbox .mi-phone-step .mi-reg-submit:hover {
            background-color: #FF936A;
        }

        /**********************************************/
        /***************“国家/地区”列表（需通过JS设置监听器）************/
        .mi-region-container {
            width: 332px;
            height: 42px;
            position: relative;
        }

        .mi-list {
            width: 330px;
            height: 40px;
            border: 1px solid #e8e8e8;
            /*border: 1px solid red;*/
            cursor: pointer;
            display: flex; /*感谢李爽大哥的指导！*/
        }

        .mi-region-container .mi-list.region {
            line-height: 40px;
        }

        .mi-region-container .mi-list.region p {
            padding-left: 14px;
            width: 275px;
            height: 40px;
            border-right: 1px solid #e8e8e8;
            text-align: left;
        }

        .mi-region-container .mi-list.region em {
            /*width: 16px;*/
            /*height: 16px;*/
            margin: 0 auto;
            color: #898989;
            /*background-color: #0000FF;*/
        }

        /*“地区”下拉列表*/
        .mi-region-container .mi-region-panel {
            width: 330px;
            height: 270px;
            border: 1px solid #e8e8e8;
            overflow-y: scroll; /*竖直方向溢出部分使用滚动条*/
            overflow-x: auto; /*水平方向，仅当水平方向有文本溢出时才显示滚动条*/

            display: none;
            position: absolute;
            /*background-color: blue;*/
            z-index: 2; /*国家地区列表应当浮动于上层*/
        }

        .mi-region-container .mi-region-panel .codecontainer {
            display: block;
            text-align: left;
        }

        /*国家地区列表的首字母*/
        .mi-region-container .mi-region-panel .codecontainer .codeheader {
            padding: 0 0 6px 10px;
            text-align: left;
            background-color: #FCDECC;
            line-height: 30px;
            color: #EF5B00;
        }

        .mi-region-container .mi-region-panel .codecontainer ul li {
            padding: 0 10px;
            line-height: 39px;
            background-color: #FFFFFF;
            border-bottom: 1px solid #e8e8e8;
            transition: all 0.1s;
            cursor: pointer;
            /*使国家名和电话区号分别靠左右两侧显示*/
            display: flex;
            justify-content: space-between;
        }

        .mi-region-container .mi-region-panel .codecontainer ul li:hover {
            background-color: #EAEAEA;
        }

        /**********************************************/
        /*“手机号码”输入框*/
        .mi-phone-container {
            width: 332px;
            height: 42px;
            position: relative;
            /*background-color: blue;*/
        }

        .mi-phone-container .mi-list.phone .result-select-regions {
            width: 68px;
            height: 40px;
            /*background-color: blue;*/
            line-height: 40px;
            border-right: 1px solid #e8e8e8;
        }

        .mi-phone-container .mi-list.phone input {
            width: 262px;
            font-size: 14px;
            border: none; /*隐藏输入框的边框*/
            outline: medium; /*隐藏输入框的轮廓（轮廓在输入框被聚焦时会显示）*/
            /*background-color: blue;*/
        }

        /**********************************************/
        /*密码输入框*/
        .mi-password-container input {
            width: 328px;
            height: 40px;
            font-size: 14px;
            border: 1px solid #e8e8e8;
            outline: medium;
        }


        /**********************************************/
        /*错误提示样式表*/
        .err-tip {
            color: #FF6700;
            line-height: 20px;
            text-align: left;
            display: none;
        }

        /**********************************************/
        /**********************************************/
        .mi-register .mi-wrap .mi-reg-container .mi-privacy-box {
            text-align: center;
            line-height: 30px;
        }

        .mi-register .mi-wrap .mi-reg-container .mi-privacy-box p a {
            color: #000000;
            font-weight: bolder;
        }

        .mi-register .mi-wrap .mi-reg-container .mi-privacy-box p a:hover {
            color: #FF6700;
        }

        /**********************************************/
        /**********************************************/


        .mi-getmsgbox {
            display: block;
        }

        /*********************************************/
        /*注册页底部 mi-reg-footer 开始*/
        .mi-reg-footer {
            /*margin-bottom: -60px;*/
            display: block;
        }

        .mi-reg-footer .mi-link-region {
            text-align: center;
            line-height: 40px;
        }

        .mi-reg-footer .mi-link-region > ul li {
            padding: 0 5px;
            display: inline;
        }

        .mi-reg-footer .mi-link-region > ul li:nth-child(1) {
            color: #FF6700;
            font-weight: bolder;
        }

        /*鼠标指向不同地区时，相应地区高亮显示*/
        .mi-reg-footer .mi-link-region > ul li:hover {
            color: #FF6700;
        }

        /*备案信息 mi-nf-intro 开始*/
        .mi-reg-footer .mi-nf-intro {
            text-align: center;
        }

        .mi-beianlink:hover {
            color: #FF6700;
        }
    </style>
</head>
<body>

<div class="mi-wrapper">
    <!--小米注册 mi-register 开始-->
    <div class="mi-register">
        <!--小米包 mi-wrap-->
        <div class="mi-wrap">
            <!--小米logo mi-logo-external-->
            <div class="mi-logo-external">
                <img src="https://account.xiaomi.com/static/res/349d9c1/account-static/respassport/acc-2014/img/milogo.png">
            </div>
            <!--“注册小米账号”标题 mi-reg-title-->
            <p class="mi-reg-title">注册小米账号</p>

            <!--小米注册容器 mi-reg-container 开始-->
            <div class="mi-reg-container">
                <!--注册输入框 mi-regbox-->
                <div class="mi-regbox">
                    <form class="mi-phone-step" action="/api/user/reg" method="post">
                        <p class="mi-title region">国家/地区</p>


                        <div class="mi-region-container">
                            <!--“地区”下拉框-->
                            <div class="mi-list region">
                                <p class="result-select-regions">中国</p>
                                <em class="iconfont icon-xiala"></em>
                            </div>

                            <!--“地区”下拉列表-->
                            <div class="mi-region-panel">
                                <div class="codecontainer countrycode-container-A">
                                    <div class="codeheader">A</div>
                                    <ul class="list">
                                        <li class="record">
                                            <span class="record-country" data-code="+93" data-brief="AF">阿富汗</span>
                                            <span class="record-code">+93</span>
                                        </li>
                                        <li class="record">
                                            <span class="record-country" data-code="+355" data-brief="AL">阿尔巴尼亚</span>
                                            <span class="record-code">+355</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="codecontainer countrycode-container-B">
                                    <div class="codeheader">B</div>
                                    <ul class="list">
                                        <li class="record">
                                            <span class="record-country" data-code="+1" data-brief="BS">巴哈马</span>
                                            <span class="record-code">+1</span>
                                        </li>
                                        <li class="record">
                                            <span class="record-country" data-code="+973" data-brief="BH">巴林</span>
                                            <span class="record-code">+973</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="codecontainer countrycode-container-C">
                                    <div class="codeheader">C</div>
                                    <ul class="list">
                                        <li class="record">
                                            <span class="record-country" data-code="+1" data-brief="KY">开曼群岛</span>
                                            <span class="record-code">+1</span>
                                        </li>
                                        <li class="record">
                                            <span class="record-country" data-code="+86" data-brief="CN">中国</span>
                                            <span class="record-code">+86</span>
                                        </li>
                                        <li class="record">
                                            <span class="record-country" data-code="+61" data-brief="CX">圣诞岛</span>
                                            <span class="record-code">+61</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <p class="mi-title region_tip">成功注册帐号后，国家/地区将不能被修改</p>

                        <p class="mi-title phone-num">手机号码</p>
                        <!--“手机号码”输入框-->
                        <div class="mi-phone-container">
                            <div class="mi-list phone">
                                <p class="result-select-regions">+86</p>
                                <input class="phone-input" type="tel" name="userid" placeholder="请输入手机号码">
                            </div>
                        </div>

                        <div class="err-tip mi-err-tip">
                            <em class="iconfont icon-ico_null_cuowu"></em>
                            <span>手机号码格式错误</span>
                        </div>
                        <div style="text-align: left; color: red;">${requestScope.message}</div>


                        <p class="mi-title password">用户名</p>
                        <div class="mi-password-container">
                            <input class="username-input" type="text" name="username" value="米粉1号">
                        </div>

                        <!--密码输入框-->
                        <p class="mi-title password">输入密码</p>
                        <div class="mi-password-container">
                            <input class="password-input" type="password" name="password"
                                   placeholder="密码长度应在8-16位之间，包含大小写字母和数字">
                        </div>

                        <div class="err-tip passwd-err-tip">
                            <em class="iconfont icon-ico_null_cuowu"></em>
                            <span>密码格式错误</span>
                        </div>

                        <input class="mi-reg-submit" type="submit" value="立即注册">
                    </form>

                    <!--隐私信息框 mi-privacy-box-->
                    <div class="mi-privacy-box">
                        <p>已阅读并同意：小米
                            <a class="inspect_link agreement_link"
                               href=" https://cn.account.xiaomi.com/about/protocol/agreement" target="_blank"
                               title="用户协议">用户协议</a>
                            和<a class="inspect_link privacy_link"
                                href="https://cn.account.xiaomi.com/about/protocol/privacy"
                                target="_blank" title=" 隐私政策 ">
                                隐私政策</a>
                        </p>
                    </div>
                </div>
                <!--接收验证码的-->
                <div class="mi-getmsgbox">

                </div>

            </div>
            <!--小米注册容器 mi-reg-container 结束-->

        </div>
    </div>
    <!--小米注册 mi-register 结束-->
    <!--注册页底部 mi-reg-footer 开始-->
    <div class="mi-reg-footer">
        <!--选择地区 mi-link-region 开始-->
        <div class="mi-link-region">
            <ul>
                <li id="zh-CN">简体</li>
                <span>|</span>
                <li id="zh-TW">繁体</li>
                <span>|</span>
                <li id="en-US">English</li>
                <span>|</span>
                <li>常见问题</li>
            </ul>
        </div>
        <!--选择地区 mi-link-region 结束-->
        <!--备案信息 mi-nf-intro 开始-->
        <div class="mi-nf-intro">

            <span>小米公司版权所有-京ICP备10046444-
            <a class="mi-beianlink" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
               target="_blank">
                <img src="https://account.xiaomi.com/static/res/9204d06/account-static/respassport/acc-2014/img/ghs.png">
                京公网安备11010802020134号
            </a>
            -京ICP证110507号
        </span>
        </div>
        <!--备案信息 mi-nf-intro 结束-->
    </div>
    <!--注册页底部 mi-reg-footer 结束-->
</div>

<script>
    let regionPanel = $(".mi-region-container .mi-region-panel"); //重定向至地区下拉列表
    let regionName = $(".mi-region-container .mi-list.region p"); //重定向至地区名称
    let itcCode = $(".mi-list.phone p"); //定向至国际电话区号
    let phoneInput = $(".phone-input"); //定向至手机号输入框
    let passwdInput = $(".password-input"); //定向至密码输入框
    let phoneerrdiv = $(".mi-err-tip"); //错误提示模块
    let phoneerrtext = $(".mi-err-tip").children("span"); //错误提示文本

    let passwderrdiv = $(".passwd-err-tip"); //错误提示模块
    let passwderrtext = $(".passwd-err-tip").children("span"); //错误提示文本

    let phoneBox = $(".mi-list.phone"); //定向至手机号输入框的外边框

    let phonereg = /^(1[358]\d{9})$/; //用于校验手机号的正则表达式
    let passwdreg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/; //用于校验密码的正则表达式，长度8-16位，至少包含1位大写、小写和数字

    //点击按钮，下拉/收缩国家地区列表
    $(".mi-region-container .mi-list.region").click(function () {
        // if (regionPanel.css("display") === "none")
        //     regionPanel.css("display", "block");
        // else
        //     regionPanel.css("display", "none");

        //另一种写法，并且带有动效
        console.log(regionPanel.css("display"));
        regionPanel.slideToggle(200);
        console.log(regionPanel.css("display"));
    });


    $("body").click(function (e) {
        e = e || window.event;
        let elem = e.target;
        if ($(elem).is(".mi-region-panel *") || $(elem).is(".mi-list.region *")) {
        } else {
            regionPanel.slideUp(200);
        }

        console.log(event.target);
    })


    //当在国家列表中选择一个国家后，应当更新下拉框中的国家名，同时更新手机的区号
    $(".mi-region-container .mi-region-panel .codecontainer ul li").click(function () {
        console.log($(this).children(".record-country").text())
        regionName.text($(this).children(".record-country").text()); //更新国家名
        itcCode.text($(this).children(".record-code").text()); //更新区号
        regionPanel.css("display", "none"); //当选择一个国家后，收起国家列表
    })

    //当手机号码输入框失去焦点时，判断手机号格式是否正确
    $(phoneInput).blur(function () {
        if (phonereg.test(phoneInput.val()) === true) {
            phoneerrdiv.css("display", "none");
            phoneBox.css("border", "1px solid #e8e8e8");
        } else {
            phoneerrdiv.css("display", "block");
            phoneBox.css("border", "1px solid #FF6700");

            if (phoneInput.val().length <= 0)
                phoneerrtext.text("请输入手机号码");
            else if (phonereg.test(phoneInput.val()) === false)
                phoneerrtext.text("手机号码格式错误");
        }
    })

    //当密码输入框失去焦点时，判断密码格式是否正确
    $(passwdInput).blur(function () {
        if (passwdreg.test(passwdInput.val()) === true) {
            passwderrdiv.css("display", "none");
            passwdInput.css("border", "1px solid #e8e8e8");
        } else {
            passwderrdiv.css("display", "block");
            passwdInput.css("border", "1px solid #FF6700");

            if (passwdInput.val().length <= 0)
                passwderrtext.text("请输入密码");
            else if (passwdreg.test(passwdInput.val()) === false)
                passwderrtext.text("密码格式错误：长度应在8-16位之间，且包含大小写字母和数字");
        }

    })

    //如果手机号码格式错误，则禁止注册的提交
    $(".mi-reg-submit").on("click", function (event) {
        if (phonereg.test(phoneInput.val()) === true && passwdreg.test(passwdInput.val()) === true) {
            // alert("用户" + itcCode.text() + " " + phoneInput.val() + "注册成功");
            $(".mi-regbox").css("display", "none");
        } else {

            if (phonereg.test(phoneInput.val()) === false) {
                phoneerrdiv.css("display", "block");
                phoneBox.css("border", "1px solid red");
                phoneInput
                    .animate({"background-color": "#FF6700"}, 500)
                    .animate({"background-color": "#FFFFFF"}, 500)
                    .animate({"background-color": "#FF6700"}, 500)
                    .animate({"background-color": "#FFFFFF"}, 500);
                if (phoneInput.val().length <= 0)
                    phoneerrtext.text("请输入手机号码");
                else
                    phoneerrtext.text("手机号码格式错误");
            }
            if (passwdreg.test(passwdInput.val()) === false) {
                passwderrdiv.css("display", "block");
                passwdInput.css("border", "1px solid red");

                passwdInput
                    .animate({"background-color": "#FF6700"}, 500)
                    .animate({"background-color": "#FFFFFF"}, 500)
                    .animate({"background-color": "#FF6700"}, 500)
                    .animate({"background-color": "#FFFFFF"}, 500);
                if (phoneInput.val().length <= 0)
                    passwderrtext.text("请输入密码");
                else
                    passwderrtext.text("密码格式错误：长度应在8-16位之间，且包含大小写字母和数字");
            }

            event.preventDefault(); //阻止事件的默认行为
            console.log(event.isDefaultPrevented()); //true
        }

    })

</script>

</body>
</html>